// 注册
<template>
  <div>
    <header id="header">
      <div class="logo"></div>
      <div class="sj">
        <input type="text" placeholder="手机号" v-model="phoneInput">
        <span>获取验证码</span>
      </div>
      <div class="yzm">
        <input type="text" placeholder="密码" v-model="codeInput">
      </div>
      <!-- 是数据的话就得加上冒号 ： -->
      <button @click="handleenroll" :disabled="isDisabled">注册</button>
      <router-link to="/user/login">直接登录</router-link>
    </header>
  </div>
</template>

<script>
// ajax请求的
import axios from "axios";
export default {
  name: "enroll",
  data() {
    return {
      phoneInput: "",
      codeInput: ""
    };
  },
  // computed是计算属性
  computed: {
    isDisabled() {
      if (this.phoneInput && this.codeInput) {
        return false;
      } else {
        return true;
      }
    }
  },
  methods: {
    handleenroll() {
      // post请求用params
      axios
        .post("/api/films/enroll", {
          params: {
            // 把用户输入的数据赋值给phone 传过去，后台接受phone数据
            phone: this.phoneInput,
            code: this.codeInput
          }
        })
        .then(res => {
          var result = res.data; //res得到的数据
          console.log(result);
          if (result.code === 0) {
            alert("注册成功");
            this.$router.push("/user/login");
            // 写入本地
            // localStorage.setItem("userName", this.phoneInput);
          } else {
            alert(result.msg);
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/common/px2rem.scss";

#header {
  height: px2rem(500);
  display: flex;
  flex-direction: column;
  .logo {
    // flex: 1;
    width: px2rem(100);
    height: px2rem(100);
    background: url(../style/images/logo.jpg) no-repeat;
    background-size: 100%;
    margin: px2rem(100) auto;
  }
  .sj,
  .yzm {
    display: flex;
    height: px2rem(55);
    margin: px2rem(10) px2rem(25);
    border-bottom: px2rem(1) solid #ccc;
    input {
      width: 70%;
      font-size: px2rem(18);
      border: 0;
      outline: none;
    }
    span {
      width: 30%;
      font-size: px2rem(18);
      color: #ccc;
      display: flex;
      align-self: center;
    }
  }
  button {
    display: flex;
    justify-content: center;
    height: px2rem(60);
    margin: px2rem(20) px2rem(25);
    background: #ff5f16;
    font-size: px2rem(20);
    text-align: center;
    color: white;
    border-radius: px2rem(7);
    border: 0;

    // 属性选择器，如果button按钮有disabled
    &[disabled] {
      color: rgb(255, 135, 80);
    }
  }
}
</style>
